<template>
  <!--列表模块title下的tag-->
  <div class="title_tag_wrap">
    <div class="title_tag_list">
      <div class="title_tag" :class="{active: activedIndex === index}" v-for="(item, index) in tagList" :key="index" @click="switchTag(index, item)">
        <p>{{item}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleTag',
  props: ['tagList'],
  data() {
    return {
      activedIndex: 0,
    };
  },
  methods: {
    // 切换标签
    switchTag(index, tag) {
      this.activedIndex = index;
      this.$emit('switchtag', tag);
    }
  }
};
</script>

<style lang="less" scoped>
/*标签 */
.title_tag_wrap {
  margin-left: 15px;
  .title_tag {
    margin: 0 10px 10px 0;
    background-color: #f1f6fe;
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 13px;
    color: #72819b;
    display: inline-block;
    &.active{
      background-color: #1f6aff;
      color: #fff;
    }
  }
}
</style>